/*
 * @Author: zhaoying
 * @Date: 2020-08-31
 * 调整持仓
 */

<template>
    <div class="adjustPosition">
        <page-title :title="ruleTitle"></page-title>

        <div class="topContent">
            <div class="refresh">
                <i class="iconfont" @click="deleteAll()">&#xe65a;</i>&nbsp;<span @click="deleteAll()">清空</span>
            </div>
            <div class="showContent">
                是否在报告中展示此页内容？
                <i class="iconfont" @click="isShowOn()">&#xe65a;</i>
            </div>
        </div>

        <!-- 步骤与正文内容分割线 -->
        <div class="splitDiv"></div>

        <!-- 产品头部描述 -->
        <div class="titleContent">
            <span class="first">产品名称</span>
            <span class="second">原持仓(万)</span>
            <span class="third">目标(万)</span>
            <span class="fourth"></span>
        </div>

        <!-- 产品内容 -->
        <div class="addContent">
            <form class="mui-input-group" ref="addNewForm">
                <span v-for="(item, index) in addNewProdData" :key="index">
                    <div class="mui-input-row first">
                        <input type="text" class="mui-input-clear" placeholder="请输入产品名称" v-model="item.productName" required>
                    </div>
                    <div class="mui-input-row second">
                        <input type="text" class="mui-input-password" placeholder="请输入金额" v-model="item.originalAmount" required>
                    </div>
                    <div class="mui-input-row second">
                        <input type="text" class="mui-input-password" placeholder="请输入金额" v-model="item.targetAmount" required>
                    </div>
                    <div class="fourth">
                        <i class="iconfont" @click="deleteProd(index)">&#xe65a;</i>
                    </div>
                </span>
            </form>
        </div>

        <div class="addNewP">
            <i class="iconfont">&#xe65a;</i>&nbsp;&nbsp;<span @click="addNewProduct()">添加新产品</span>
        </div>

        <div class="remark">
            注：目标金额不可超过原持仓金额
        </div>

        <!-- 下一步 默认灰色不可点击-->
        <mt-button @click="adjustComplate()" class="bottom" size="large" :disabled="disabled"  ref="nextBtn">调整完成</mt-button>

    </div>
</template>

<script>

//表单组件js&less
import form from '@src/common/components/form/form.js'
import '@src/common/components/form/form.less'

import "./adjustPosition.less";
//按钮less
import '@src/common/less/button.less'


//黑条提示
// import tipAction from "@common/components/otherComponents/tipAction/tipAction"
// import tablea from '@src/common/table/table'
import pageTitle from '@src/common/pageTitle/pageTitle'

export default {
    name: "adjustPosition",
    mixins:[form],
    components:{
        pageTitle
    },
    data() {
        return {
            ruleTitle: '调整持仓', // pageTitle中间部分显示
            addNewProdData: [
                {productName: '产品一号', originalAmount: '11', targetAmount: '10'}
            ], // 添加的产品数据
            disabled: false,
            isShowOnStatus: false, // 是否在首页展示此页内容 默认不展示
            assetAllocationId: '111', // 资产配置ID
        };
    },

    mounted(){
        if(this.isWechat) {
            window.addEventListener('scroll', this.handleScroll, true);  // 监听（绑定）滚轮滚动事件
        };
        this.$parent.changeLoading(false);
    },

    watch: {

    },
    methods: {
        // 回显持仓数据
        getProductData() {
            this.$axiosHttp.http({
                name:'获取已有持仓产品数据',
                url: apiUrl.getSelectPositionsListApi,
                needFailCallback: true,
                params: {assetAllocationId: this.assetAllocationId}
            }, (res) => {

                this.addNewProdData = [
                    {productName: '获取到的产品', originalAmount: '11', targetAmount: '10'}
                ];

            }, (res) => {
                // 获取失败
                // tipAction(res.data.message);
            })
        },

        // 点击“添加新产品”
        addNewProduct() {
            // let lastData = this.addNewProdData[this.addNewProdData.length - 1];
            // if (lastData.productName == '' || lastData.originalAmount == '' || lastData.targetAmount == '') {
            //
            // }
            console.log(this.addNewProdData);
            // return
            this.addNewProdData.push({productName: '', originalAmount: '', targetAmount: ''})
        },

        // 删除某一项产品
        deleteProd(index) {
            this.addNewProdData.splice(index, 1);
        },

        deleteAll() {
            this.addNewProdData = [];
        },

        // 是否在报告中展示此页内容？
        isShowOn() {
            if (this.isShowOnStatus) {
                this.isShowOnStatus = false;
            } else {
                this.isShowOnStatus = true;
            }
        },

        // 点击调整完成按钮，发送请求
        adjustComplate() {
            console.log(this.addNewProdData);
            this.$axiosHttp.http({
                name:'保存持仓调整',
                url: apiUrl.savePositionsApi,
                needFailCallback: true,
                params: {assetAllocationId: this.assetAllocationId, positions: this.addNewProdData}
            }, (res) => {

            }, (res) => {
                // 获取失败
                // tipAction(res.data.message);
            })
        },

    }
};
</script>

